<template>
    <div id="tszcMap"/>
</template>

<script>
    import echarts from 'echarts'
    import pls from './json/tszc.json'
    //自定义图片
    import deviceAddress from '../../../../assets/img/bigData2.0/child/map/deviceAddss.png'

    export default {
        name: "tszcMap",
        data(){
            return {
                mapData: [
                    {
                        type:1,
                        name: '张家川镇',
                        value: 5896,
                        online: 2683,
                        offline: 1564
                    },
                    {
                        type:1,
                        name: '龙山镇',
                        value: 5896,
                        online: 2683,
                        offline: 1564
                    },
                    {
                        type:1,
                        name: '恭门镇',
                        value: 5896,
                        online: 2683,
                        offline: 1564
                    },
                    {
                        type:1,
                        name: '马鹿乡',
                        value: 5896,
                        online: 2683,
                        offline: 1564
                    },
                    {
                        type:1,
                        name: '梁山乡',
                        value: 4585,
                        online: 3350,
                        offline: 1150
                    },
                    {
                        type:1,
                        name: '马关乡',
                        value: 3596,
                        online: 2000,
                        offline: 714
                    },
                    {
                        type:1,
                        name: '刘堡乡',
                        value: 5894,
                        online: 900,
                        offline: 60
                    },
                    {
                        type:1,
                        name: '胡川乡',
                        value: 8000,
                        online: 4500,
                        offline: 1500
                    },
                    {
                        type:1,
                        name: "大阳乡",
                        value: 5000,
                        online: 2000,
                        offline: 1000
                    },
                    {
                        type:1,
                        name: "川王乡",
                        value: 5000,
                        online: 2000,
                        offline: 1000
                    },
                    {
                        type:1,
                        name: "张棉乡",
                        value: 5000,
                        online: 2000,
                        offline: 4000
                    },
                    {
                        type:1,
                        name: "木河乡",
                        value: 5000,
                        online: 2000,
                        offline: 4000
                    },
                    {
                        type:1,
                        name: "连五乡",
                        value: 5000,
                        online: 2000,
                        offline: 4000
                    },
                    {
                        type:1,
                        name: "平安乡",
                        value: 5000,
                        online: 2000,
                        offline: 4000
                    },
                    {
                        type:1,
                        name: "阎家乡",
                        value: 5000,
                        online: 2000,
                        offline: 4000
                    },
                ],
                deviceData:[
                    {
                        type:2,
                        deviceId:`62080200111327000008`,
                        deviceName:`一年级（1）班`,
                        offset:[105.73,35.51],
                    },
                    {
                        type:2,
                        deviceId:`62082519111327000362`,
                        deviceName:`云崖寺佛教协会门口`,
                        offset:[105.701263,35.422055],

                    },
                    {
                        type:2,
                        deviceId:`62082502111327000006`,
                        deviceName:`永宁小学三楼1`,
                        offset:[106.73,35.6],

                    },
                    {
                        type:2,
                        deviceId:`62080200111327001044`,
                        deviceName:`一年级3班`,
                        offset:[106.73,35.45 ],

                    },
                    {
                        type:2,
                        deviceId:`62080203111327000059`,
                        deviceName:`逸夫楼高一10班416`,
                        offset:[107.32,35.155],

                    },
                    {
                        type:2,
                        deviceId:`62080216111327000206`,
                        deviceName:`实验幼儿园外围5`,
                        offset:[107.32,35.29],

                    },
                    {
                        type:2,
                        deviceId:`62082305111327000414`,
                        deviceName:`崇信县二中操场北侧`,
                        offset:[106.956,35.29],

                    },
                    {
                        type:2,
                        deviceId:`62010207111327000713`,
                        deviceName:`华亭市第一人民医院核酸采样点`,
                        offset:[106.456,35.29],

                    },
                    {
                        type:2,
                        deviceId:`62080203111327000184`,
                        deviceName:`学校门口东向南`,
                        offset:[105.89,35.29],

                    },
                ],
                nameMap: '平凉市',
            }
        },
        mounted() {
            let h = document.body.clientHeight;
            document.getElementById("tszcMap").style.height = 46.66 + "vh";
            this.initDom();
        },
        methods: {
          /**
           * 地图初始化
           */
          initDom: function () {
                //基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('tszcMap'), 'light');
                this.$echarts.registerMap(this.nameMap, pls);
                let self = this;
                //点击后的企业放在这
                let deviceData = self.deviceData;
                //=======>>点击事件<<========
                myChart.on('click', function(e) {
                        //点击的是设备
                        // if (e.data.type === 2){
                        //     self.toFather_deviceShow(e.data.deviceId,e.data.deviceName);
                        // }
                  console.log(`点击了`,e)

                });
                let option = {
                    color:'red',
                    tooltip: {
                        trigger: 'item',
                        formatter:function (params) {
                            //第一种是鼠标地图上
                            if (params.data.type === 1){
                                let name = params.marker+params.data.name + ':<br>';
                                let item1 = '设备总数:'+params.data.value+ ' 台<br>';
                                let item2 = '在线数:'+params.data.online+ ' 台<br>';
                                let item3 = '离线数:'+params.data.offline+ ' 台<br>';
                                return name+item1+item2+item3;
                            }
                            //第二种是鼠标放在设备上
                            if (params.data.type === 2){
                                let name = params.marker+ '设备信息' + ':<br>';
                                let item1 = '设备名称:'+params.data.deviceName+ '<br>';
                                let item2 = '设备Id:'+ params.data.deviceId + '<br>';
                                return name+item1+item2
                            }
                        }
                    },
                    geo: {
                        map: '平凉市',
                        aspectScale: 1, //长宽比
                        zoom: 1.2,
                        top:'center',
                        left:'center',
                        roam: false,
                        itemStyle: {
                            //加阴影
                            normal: {
                                areaColor: '#00D4FF',
                                shadowColor: '#334C8D00',//阴影颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 12
                            },
                            emphasis: {
                                areaColor: '#2AB8FF',
                                borderWidth: 0,
                                color: '#FFFFFF',
                                label: {
                                    show: false
                                }
                            }
                        },
                    },
                    series:[
                        {
                            type: 'map',
                            map: self.nameMap,
                            //长宽比
                            aspectScale: 1,
                            top:'center',
                            left:'center',
                            z:1,
                            roam: false,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        let color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: 'rgba(54, 171, 255, 0.5)'
                                            },
                                            {
                                                offset: 0.1,
                                                color: '#196093'
                                            },
                                            {
                                                offset: 0.2,
                                                color: '#196093'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(12,52,89,1)',
                                            },
                                        ]);
                                        return color
                                    },
                                  //地图边界线
                                    borderColor: '#00e5ff',
                                    borderWidth: 1.5,
                                    areaColor: '#12235c',
                                    label: {
                                        show: true,
                                        color: '#fff',
                                        fontSize: this.fontSize(0.11),
                                    },
                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            zoom: 1.2,
                            data: self.mapData //热力图数据   不同区域 不同的底色
                        },
                        //设备相关图标
                        {
                            name: '企业',
                            type: 'custom',
                            coordinateSystem: 'geo',
                            hoverAnimation: true,
                            renderItem: function (params,api) {
                                //具体实现自定义图标的方法
                                //图标分类
                                return self.addImage(params, api, deviceData);
                            },
                            itemStyle: {
                                normal: {
                                    // 气泡颜色
                                    color: '#FFCC00',
                                }
                            },
                            data: deviceData
                        },
                    ]

                };
                // 绘制图表
                myChart.setOption(option);
                //====>监听窗口变化 三种方式<====

                //自适应2
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },
            /**
             * 适配文字大小
             */
            fontSize(res){
                let docEl = document.documentElement,
                    clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
                if (!clientWidth) return;
                let fontSize = 100 * (clientWidth / 1440);
                return res*fontSize;
            },
            /**
             *
             * 添加自定义地图
             */
            addImage(params, api, realData){
                let url = deviceAddress;
                return  {
                    type: 'image',
                    style: {
                        image: url,
                        x: api.coord([
                            realData[params.dataIndex].offset[0], realData[params.dataIndex].offset[1]
                        ])[0],
                        y: api.coord([
                            realData[params.dataIndex].offset[0], realData[params.dataIndex].offset[1]
                        ])[1],
                        width: 30,
                        height: 30,
                    }
                }
            },
            /**
             * 给父组件传值
             */
            toFather_deviceShow(deviceId,deviceName) {
                //用于企业摄像头布置 (图片一张)
                this.$emit('devicePlay', deviceId,deviceName);
            },
        }
    }


</script>

<style scoped>
    #tszcMap {
        height: 100px;
        width: 100%;
    }
</style>
